<template>
	<view class="xilu">
		<view class="container" style="padding-bottom: 30rpx;">
			<!-- <tabbar :footIdx="2" footText="路线"></tabbar> -->
			<image class="m-backdrop" src="/static/icon/icon_bg1.png" mode="widthFix"></image>
			<view class="m-header">
				<image class="m-backdrop" src="/static/icon/icon_bg1.png" mode="widthFix"></image>
				<view class="g-custom-nav flex-box plr30"
					:style="{ paddingTop: statusBarHeight + 'px', height: 'calc(90rpx + ' + statusBarHeight + 'px)' }">
					<view class="message" :class="{active:messageCount>0}" @click="bindMessage()">
						<image src="/static/icon/icon_message.png" mode="aspectFit"></image>
						<view>消息</view>
					</view>
					<view class="search_box flex-box">
						<view class="addr m-ellipsis" @click="bindCityChange">{{currentCity?currentCity.name:''}}</view>
						<image class="icon_arrow" src="/static/icon/icon_arrow.png"></image>
						<view class="line"></view>
						<image class="icon_search" src="/static/icon/icon_search.png"></image>
						<input class="input flex-1"  @click="bindSearch()" disabled="true" type="text" placeholder="出发城市/目的地" placeholder-class="cola" />
					</view>
				</view>

				<!--  -->
				<view class="xilu_select" v-show="isShowSelect">
					<view class="g_tab flex-box">
						<view class="item flex-1" :class="{'active': query.category_id == item.id}"
							v-for="(item,index) in categoryList" @click="tabClick(item.id)">{{item.name}}</view>
					</view>
					<view class="g_select flex-box">
						<view class="flex-box flex-center flex-1" @click="bindChangeSearchTab(0)" :class="{active: searchTab==0}">
							<view>综合</view>
							<image :src="'/static/icon/icon_arrow1' + (searchTab==0 ? 'on' : '') + '.png'" mode="aspectFit"></image>
						</view>
						<view class="flex-box flex-center flex-1" @click="bindChangeSearchTab(1)" :class="{active: searchTab==1}">
							<view>价格</view>
							<image class="icon_price" :class="{'rotate': searchTab==1 && query.order=='desc'}" src="/static/icon/icon_arrow3.png"
								mode="aspectFit"></image>
						</view>
						<view class="flex-box flex-center flex-1" @click="bindChangeSearchTab(2)" :class="{active: searchTab==2}">
							<view>热门</view>
							<image :src="'/static/icon/icon_arrow1' + (searchTab==2 ? 'on' : '') + '.png'" mode="aspectFit"></image>
						</view>
						<view class="flex-box flex-center flex-1" @click="bindChangeSearchTab(3)" :class="{active: searchTab==3}">
							<view>筛选</view>
							<image src="/static/icon/icon_arrow1.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="g_select_wrap">
						<block v-if="searchTab == 0">
							<view class="item" :class="{active:query.sort=='weigh'}" @click="bindChangeSort('weigh')">综合</view>
							<view class="item" :class="{active:query.sort=='points'}" @click="bindChangeSort('points')">推荐</view>
						</block>
						<block v-if="searchTab == 2">
							<view class="item" :class="{active:query.sort=='updatetime'}" @click="bindChangeSort('updatetime')">最新</view>
							<view class="item" :class="{active:query.sort=='appoint_count'}" @click="bindChangeSort('appoint_count')">热门</view>
						</block>
					</view>
				</view>

			</view>

			<view class="g_mask" v-show="isShowSelect" @click="closeSelect"></view>


			<view class="pr" :style="{ paddingTop: 'calc(90rpx + ' + statusBarHeight + 'px)' }">
				<view class="xilu_swiper">
					<swiper class="swiper" :current="swiperCurrent" circular @change="swiperChange">
						<swiper-item v-for="(item,index) in bannerList" :key="index">
							<view class="nav" :class="{'scale': swiperCurrent !==index}" @click="bannerjump(item.minapp_url)">
								<image :src="item.thumb_image_text" mode="aspectFill" class="img"></image>
							</view>
						</swiper-item>
					</swiper>
					<view class="swiper_dots flex-box flex-center">
						<view class="dots" v-for="(item,index) in bannerList" :key="index"
							:class="{'active': swiperCurrent == index}">
						</view>
					</view>
				</view>

				<view class="xilu_select" :style="{top: 'calc(90rpx + ' + statusBarHeight + 'px)'}">
					<view class="g_tab flex-box">
						<view class="item flex-1" :class="{'active': query.category_id == item.id}"
							v-for="(item,index) in categoryList" @click="tabClick(item.id)">{{item.name}}</view>
					</view>
					<view class="g_select flex-box">
						<view class="flex-box flex-center flex-1" @click="bindChangeSearchTab(0)" :class="{active: searchTab==0}">
							<view>综合</view>
							<image :src="'/static/icon/icon_arrow1' + (searchTab==0 ? 'on' : '') + '.png'" mode="aspectFit"></image>
						</view>
						<view class="flex-box flex-center flex-1" @click="bindChangeSearchTab(1)" :class="{active: searchTab==1}">
							<view>价格</view>
							<image class="icon_price" :class="{'rotate': searchTab==1 && query.order=='desc'}" src="/static/icon/icon_arrow3.png" mode="aspectFit"></image>
						</view>
						<view class="flex-box flex-center flex-1" @click="bindChangeSearchTab(2)" :class="{active: searchTab==2}">
							<view>热门</view>
							<image :src="'/static/icon/icon_arrow1' + (searchTab==2 ? 'on' : '') + '.png'" mode="aspectFit"></image>
						</view>
						<view class="flex-box flex-center flex-1" @click="bindChangeSearchTab(3)" :class="{active: searchTab==3}">
							<view>筛选</view>
							<image src="/static/icon/icon_arrow1.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>

				<view class="p40">
					<view class="g_travel_list">
						<tour-list :tourList="tourList"></tour-list>
						<view class="g-btn3-wrap">
							<view class="g-btn3" @click="fetch">{{tourListMore.text}}</view>
						</view>
					</view>
				</view>


			</view>

		</view>
	</view>
</template>

<script>
	import tourList from '@/components/tour-list/tour-list.vue'
	const app = getApp();
	export default {
		components: {
			tourList
		},
		data() {
			return {
				statusBarHeight: 20,
				swiperCurrent: 0,
				messageCount: 0,
				categoryList: [],
				bannerList: [],
				currentCity: null,
				tourList: [],
				tourListMore: {
					page: 1
				},
				query: {sort: 'weigh',order: 'desc',category_id: -1},
				searchTab: 0,
				isShowSelect: false
			};
		},
		onLoad() {
			this.statusBarHeight = app.globalData.statusBarHeight;
			let page = this;
			this.currentCity = this.$core.getCurrentCity();
			page.refreshPage();
			uni.$on(app.globalData.Event.CurrentCityChange, function(currentCity) {
				page.currentCity = currentCity;
				page.refresh();
			})
		},
		onShow() {
			if(this.$core.getUserinfo()){
				this.$util.getMessageCount(false).then(count=>{
					this.messageCount = count
				})
			}
		},
		onPullDownRefresh() {
			this.refreshPage();
		},
		onShareAppMessage() {

		},
		onShareTimeline() {

		},
		onUnload() {
			uni.$off(app.globalData.Event.CurrentCityChange,this);
		},
		onReachBottom() {
			this.fetch();
		},
		methods: {
			swiperChange(e) {
				this.swiperCurrent = e.detail.current
			},
			//更换城市
			bindCityChange() {
				uni.navigateTo({
					url: '/pages/change_city/change_city'
				})
			},
			//分类
			tabClick(id) {
				this.query.category_id = id;
				this.refresh();
			},
			bindSearch(){
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			//排序,0=综合（弹窗），1=价格，2=热门（弹窗)
			bindChangeSearchTab(searchTabIndex){
				if(searchTabIndex == 0 || searchTabIndex == 2){
					this.isShowSelect = this.isShowSelect&&this.searchTab == searchTabIndex?false:true;
				}else if(searchTabIndex == 1){
					this.query.sort = 'salesprice';
					this.query.order = this.query.order == 'asc'?'desc':'asc';
					this.isShowSelect = false;
					this.refresh();
				}else if(searchTabIndex == 3){
					let query = this.query;
					uni.navigateTo({
						url:'/pages/filtrate/filtrate?type=tour',
						events:{
							searchSuccess: data=>{
								this.query = data;
								this.refresh();
							},
						},
						success(res) {
							res.eventChannel.emit("searchTransform",query)
						}
					})
				}
				this.searchTab = searchTabIndex;
			},
			//二级排序
			bindChangeSort(sort){
				this.query.sort = sort;
				this.query.order = 'desc';
				this.isShowSelect = false;
				this.refresh();
			},

			refreshPage() {
				//轮播
				this.$core.get({
					url: 'xilutour.banner/index',
					data: {
						group: 'tour_index'
					},
					loading: false,
					success: (ret) => {
						this.bannerList = ret.data;
					}
				});
				//分类
				this.$core.get({
					url: 'xilutour.common/tour_category',
					data: {},
					loading: false,
					success: (ret) => {
						this.categoryList = ret.data;
						if (ret.data.length > 0) this.query.category_id = ret.data[0].id;
						//线路列表
						this.refresh();
					}
				});

				uni.stopPullDownRefresh();
			},
			refresh(cacheQuery = false) {
				this.tourList = [];
				this.tourListMore = {
					page: 1
				};
				if (cacheQuery) this.query = {};
				this.fetch();
			},
			fetch() {
				let query = this.query;
				query.pagesize = 10;
				this.$util.fetch(this, 'xilutour.tour/lists', query, 'tourListMore', 'tourList', 'data', data => {

				})
			},
			//轮播图
			bannerjump(url){
				if(url.trim() == ''){
					return '';
				}
				uni.navigateTo({
					url: url
				})
			},
			bindMessage(){
				uni.navigateTo({
					url: '/pages/my_message/my_message'
				})
			},
			closeSelect() {
				this.isShowSelect = false
			}

		}
	}
</script>

<style lang="less" scoped>
	.xilu {
		&_swiper {
			position: relative;
			padding: 30rpx 40rpx 40rpx;

			.swiper {
				display: block;
				width: 670rpx;
				height: 320rpx;

				.nav {
					position: relative;
					width: 670rpx;
					height: 320rpx;
					border-radius: 15rpx;
				}

				.img {
					margin: 0 auto;
					display: block;
					width: 670rpx;
					height: 320rpx;
					border-radius: 15rpx;
				}
			}

			.swiper_dots {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;

				.dots {
					margin: 0 4rpx;
					width: 14rpx;
					height: 4rpx;
					background: #D8D8D8;
				}

				.dots.active {
					background: #333333;
				}
			}
		}

		&_select {
			position: sticky;
			left: 0;
			right: 0;
			z-index: 10;
			background-color: #fff;
		}

		.container {
			overflow-y: unset;
		}
	}
</style>